<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-card-content">
            <div class="stat-card-icon" style="background-color: #409EFF;">
              <i class="el-icon-s-goods"></i>
            </div>
            <div class="stat-card-info">
              <div class="stat-card-title">商品总数</div>
              <div class="stat-card-value">{{ stats.goodsCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-card-content">
            <div class="stat-card-icon" style="background-color: #67C23A;">
              <i class="el-icon-s-cooperation"></i>
            </div>
            <div class="stat-card-info">
              <div class="stat-card-title">设备总数</div>
              <div class="stat-card-value">{{ stats.machineCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-card-content">
            <div class="stat-card-icon" style="background-color: #E6A23C;">
              <i class="el-icon-s-order"></i>
            </div>
            <div class="stat-card-info">
              <div class="stat-card-title">今日订单</div>
              <div class="stat-card-value">{{ stats.todayOrderCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-card-content">
            <div class="stat-card-icon" style="background-color: #F56C6C;">
              <i class="el-icon-s-data"></i>
            </div>
            <div class="stat-card-info">
              <div class="stat-card-title">今日销售额</div>
              <div class="stat-card-value">¥{{ stats.todaySales }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>最近7天销售趋势</span>
          </div>
          <div class="chart-container">
            <div ref="salesChart" style="width: 100%; height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>商品销量TOP5</span>
          </div>
          <div class="chart-container">
            <div ref="goodsChart" style="width: 100%; height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>最近订单</span>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button> -->
          </div>
          <el-table :data="recentOrders" style="width: 100%">
            <el-table-column prop="orderNo" label="订单号" width="180"></el-table-column>
            <el-table-column prop="goodsName" label="商品名称"></el-table-column>
            <el-table-column prop="price" label="金额" width="100">
              <template slot-scope="scope">
                ¥{{ scope.row.price }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status | statusTextFilter }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="时间" width="180"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>库存预警</span>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button> -->
          </div>
          <el-table :data="inventoryWarnings" style="width: 100%">
            <el-table-column prop="goodsName" label="商品名称"></el-table-column>
            <el-table-column prop="machineName" label="设备名称"></el-table-column>
            <el-table-column prop="currentStock" label="当前库存" width="100"></el-table-column>
            <el-table-column prop="warningStock" label="预警库存" width="100"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleReplenish(scope.row)">补货</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getDashboardData } from '@/api/dashboard'

export default {
  name: 'Dashboard',
  filters: {
    statusFilter (status) {
      const statusMap = {
        'paid': 'success',
        'unpaid': 'danger',
        'refunded': 'info'
      }
      return statusMap[status]
    },
    statusTextFilter (status) {
      const statusTextMap = {
        'paid': '已完成',
        'unpaid': '未支付',
        'refunded': '已退款'
      }
      return statusTextMap[status]
    }
  },
  data () {
    return {
      stats: {
        goodsCount: 0,
        machineCount: 0,
        todayOrderCount: 0,
        todaySales: 0
      },
      recentOrders: [],
      inventoryWarnings: [],
      salesChart: null,
      goodsChart: null
    }
  },
  mounted () {
    this.fetchData()
  },
  beforeDestroy () {
    if (this.salesChart) {
      this.salesChart.dispose()
    }
    if (this.goodsChart) {
      this.goodsChart.dispose()
    }
  },
  methods: {
    fetchData () {
      getDashboardData().then(response => {
        this.stats = response.data.stats
        this.recentOrders = response.data.recentOrders
        this.inventoryWarnings = response.data.inventoryWarnings

        // 初始化图表
        this.$nextTick(() => {
          this.initSalesChart(response.data.salesTrend)
          this.initGoodsChart(response.data.topGoods)
        })
      })
    },
    initSalesChart (data) {
      this.salesChart = echarts.init(this.$refs.salesChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: data.dates,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            color: '#666'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#666'
          },
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          }
        },
        series: [{
          data: data.values,
          type: 'line',
          smooth: true,
          itemStyle: {
            color: '#409EFF'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(64, 158, 255, 0.5)'
              },
              {
                offset: 1,
                color: 'rgba(64, 158, 255, 0.1)'
              }
            ])
          }
        }]
      }
      this.salesChart.setOption(option)
    },
    initGoodsChart (data) {
      this.goodsChart = echarts.init(this.$refs.goodsChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#666'
          },
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: data.names,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            color: '#666'
          }
        },
        series: [{
          name: '销量',
          type: 'bar',
          data: data.values,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ])
          }
        }]
      }
      this.goodsChart.setOption(option)
    },
    handleReplenish (row) {
      this.$router.push({ path: '/inventory', query: { goodsId: row.goodsId, machineId: row.machineId } })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;

  .stat-card {
    margin-bottom: 20px;

    .stat-card-content {
      display: flex;
      align-items: center;

      .stat-card-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;

        i {
          font-size: 30px;
          color: #fff;
        }
      }

      .stat-card-info {
        flex: 1;

        .stat-card-title {
          font-size: 14px;
          color: #999;
          margin-bottom: 5px;
        }

        .stat-card-value {
          font-size: 24px;
          font-weight: bold;
        }
      }
    }
  }

  .chart-container {
    width: 100%;
    height: 300px;
  }
}
</style>